<template>
    <div class="homeWrap">
        <div class="stateLine">
            <div class="state1 state">
                <p class="statep">库存预警</p>
                <p class="stateValue">{{inventoryWarning}}</p>
            </div>
            <div class="state2 state">
                <p class="statep">待处理订单</p>
                <p class="stateValue">{{backlogOrder}}</p>
            </div>
            <div class="state3 state">
                <p class="statep">今日进库</p>
                <p class="stateValue">{{todayInventory}}</p>
            </div>
            <div class="state4 state">
                <p class="statep">今日订单</p>
                <p class="stateValue">{{todayOrder}}</p>
            </div>
        </div>
        <div class="chartBox ">
            <div id="chart1" class="chart"></div>
            <div id="chart2" class="chart"></div>
        </div>
    </div>
</template>


<script lang='ts'>
import { onMounted, ref, toRaw } from 'vue-demi'
import {BASE_URL} from '../utils/tools'
import axios from 'axios'
import router from '@/router'
import { useStore } from 'vuex'
import * as echarts from 'echarts';

export default {
    setup(){
        let store = useStore();
        let chartData1=ref([[],[]]);
        let chartData2=ref([[],[]]);
        const token = localStorage.getItem('TOKEN');
        //获取相关数据
        async function getData(){
            try {
                const res = await axios.get(`${BASE_URL}/data/specialValue`, {
                    headers: {
                        'Authorization': 'Bearer '+ token,
                    },
                    params:{
                        userId:store.getters.getUserId
                    }
                })
                if(res.data.status==0){
                    let data = res.data;
                    inventoryWarning.value = data.data.wareLess;
                    backlogOrder.value = data.data.unfinishedOrder;
                    todayInventory.value = data.data.totalWare;
                    todayOrder.value = data.data.totalOrder;
                    chartData1.value = data.chartData1
                    chartData2.value = data.chartData2;
                    InitializeChart()
                }
            } catch (error) {
                console.log("error")
            }
        }
        function InitializeChart(){
            var myChart1 = echarts.init(document.getElementById('chart1') as HTMLElement);
            var myChart2 = echarts.init(document.getElementById('chart2') as HTMLElement);
            let fontSize = 12;
            if(document.body.clientWidth<981){
                fontSize = 10
            }
            // 绘制图表
            myChart1.setOption({
            title: {
                text: '仓库库存图',
                textStyle: {
                fontSize: 25,
                fontFamily: "Courier New"
                // color:"#fff"
                },
            },
            grid:{
                left:'15%'
            },
            tooltip: {},
            xAxis: {
                data: chartData1.value[1],
                axisLabel: {
                    show: true,
                    color:"rgb(70,70,70)",
                    fontSize: fontSize
                },
            },
            yAxis: {
                axisLabel: {
                    show: true,
                    color:"rgb(70,70,70)",
                    fontSize: 14
                }
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    barMaxWidth:60,
                    data: chartData1.value[0],
                    itemStyle:{
                    }
                }
            ]
            });
            //图表2

            myChart2.setOption({
            title: {
                text: '一周内销售额',
                textStyle: {
                fontSize: 25,
                fontFamily: "Courier New"
                // color:"#fff"
                },
            },
            grid:{
                left:'15%'
            },
            tooltip: {},
            xAxis: {
                data: chartData2.value[1],
                axisLabel: {
                    show: true,
                    color:"rgb(70,70,70)",
                    fontSize: fontSize
                },
            },
            axisLabel: {
                show: true,
                color:"rgb(70,70,70)",
                fontSize: 20
            },
            yAxis: {
                axisLabel: {
                    show: true,
                    color:"rgb(70,70,70)",
                    fontSize: 14,
                    
                },
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    barMaxWidth:60,
                    data: chartData2.value[0],
                    itemStyle:{
                    },
                }
            ]
            });
            function chartResize(){
                myChart1.resize();
                myChart2.resize();
            }
            window.addEventListener('resize',debounce(chartResize,200))
        }
        function debounce(callback:()=>void,delay:number){
            let timer:any;
            return function(){
                if(timer){
                    clearTimeout(timer);
                }
                timer = setTimeout(()=>{
                    callback()
                },delay)
            }
        }
        onMounted(()=>{
            getData();
        })
        let inventoryWarning = ref(0);
        let backlogOrder = ref(0);
        let todayInventory = ref(0);
        let todayOrder = ref(0);
        return{
            inventoryWarning,
            backlogOrder,
            todayInventory,
            todayOrder
        }
    }
}
</script>

<style lang='less' scoped>
    .homeWrap{
        background-color: rgba(0, 0, 0, 0.1);
        width: 100%;
        height: 94vh;
        padding: 20px;
        overflow: hidden;
        box-sizing: border-box;
        transition: transform 0.5s;
        .stateLine{
            box-sizing: border-box;
            font-family: "SF Pro SC","SF Pro Display","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
            margin-bottom: 20px;
            width: 100%;
            height: 20%;
            // background: #fff;
            border-radius: 10px;
            display: grid;
            grid-template-columns: repeat(4, 22%);
            grid-template-rows: 80%;
            grid-column-gap: 4%;
            // justify-content: center;
            align-content: center;
            .state1{
                background: #eb5a56;
            }
            .state2{
                background: #f8bc33;
            }
            .state3{
                background: #5e4eb6;
            }
            .state4{
                background: #62cb44;
            }
            .state{
                border-radius: 10px;
                position: relative;
                .statep{
                    box-sizing: border-box;
                    width: 80px;
                    height: 40px;
                    text-align: center;
                    font-size: 14px;
                    font-weight: bold;
                    border-radius: 10px;
                    line-height: 40px;
                    background: rgba(0, 0, 0, 0.1);
                }
                .stateValue{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                    font-size: 40px;
                }
            }
        }
        
        .chartBox{
            border-radius: 10px;
            height: 650px;
            @media (max-width:1746px) {
                height: 595px;
            }
            @media (max-width:1537px) {
                height: 520px;
            }
            @media (max-width:1281px) {
                height: 420px;
            }
            width: 100%;
            background: #fff;
            display: grid;
            grid-template-columns: repeat(2, 50%);
            overflow: hidden;
            .chart{
                // border-radius: 10px;
                background: rgba(0,0,0,0.5);
            }
            #chart1{
                // background: #eb5a56;
                border-radius: 10px 0 0 10px;
            }
            #chart2{
                // background: #f8bc33;
                border-radius: 0 10px 10px 0;
            }
        }
    }
    @media (max-width:980px) {
        .homeWrap{
            height: 830px;
            background-image: url('../../static/img/loginBackground.jpg');
            background-position:70% 20%;
            background-size :auto 100%;
            .stateLine{
                height: 14%;
                .state{
                    .statep{
                        height: 35px;
                    }
                    .stateValue{
                        font-size: 35px;
                        top:60%
                    }
                }
            }
            .chartBox{
                grid-template-columns: repeat(1, 100%);
                grid-template-rows: repeat(2, 50%);
                #chart1{
                    // background: #eb5a56;
                    border-radius: 0;
                }
                #chart2{
                    // background: #f8bc33;
                    border-radius: 0;
                }
            }
        }
    }
</style>